body{
    background:#a3d1bc;
}
.box {
    position: relative;
    margin:100px auto;
    width: 100px;
    height: 120px;
} 
.pillar{  
    position:absolute;
    left:50px;
    width: 4px;
    border-width: 0 12px 170px 12px;
    /* 边宽的上右下左 */
    border-style: none solid solid;
    /*  边框的线条*/
    border-color: transparent transparent white;
    /*  边框的颜色*/
}

.axis{
    position:absolute;
    top:0px;
    left:60px;
    width:4px;
    height:4px;
    border:3px #fff solid;
    background:#a5cad6;
    border-radius:5px;
    z-index: 88;
    transition-duration: 1s;
    /* 过度的时间 */
    animation: rotate 4s linear infinite;
    /* 动画旋转 */
} 
.sig{
    position:absolute;
    display: block;
    height: 0;
    width: 2px;
    border-width: 100px 2px 0px 2px;
    border-style: solid solid none;
    border-color: white transparent transparent ;
    transform-origin:0px 0px;
    /* 旋转的位置 */

}
.swing{
    top:1px;
    left:-2px;
    box-shadow: 1px 1px 1px rgba(105, 97, 97, 0.1);
    transform:rotate(60deg); 
 } 
.swing2{
    top:0px;
    left:4.5px;
    transform:rotate(180deg);
     
 } 
.swing3{
    top:6px;
    left:3px;
    transform:rotate(300deg);
 } 
.axis:hover {
    animation:rotate2 .3s linear infinite;
} 
@keyframes rotate{
    from{
        transform:rotate(0deg)}
    to{
        transform:rotate(360deg)
        }
}
/* 创建一个动画 */
@keyframes rotate2{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}